@import models.Tables.GrnaRow
@(row: GrnaRow)
@config.main(row.file) {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Omics Network Analysis : " + row.file)

            <div class="main-body">

                <p>Note: Please save the page address to view the analysis results(https://modms.lzu.edu.cn/alfalfa/tools/itc/@{row.file}).</p>

                <table class="table">

                    <tbody>

                        <tr>
                            <th>Task ID</th>
                            <td>@row.file</td>
                        </tr>
                        <tr>
                            <th>Task Time</th>
                            <td id="time"></td>
                        </tr>
                        <tr>
                            <th>Task State</th>
                            <td id="state">
                            @{
                                row.state match {
                                    case 0 => <div>
                                    Running...
                                        <img src="/assets/images/timg.gif"/>
                                    </div>
                                    case 1 => <div style="color:Green">Success</div>
                                    case 2 => <div style="color:red">Failure</div>
                                }
                            }
                            </td>
                        </tr>

                    </tbody>

                </table>

                <div id="result" style="display: none">





                </div>

            </div>
        </div>
    </div>
    <script type="text/javascript" src="@routes.Assets.versioned("cytoscape3.15.1/cytoscape.min.js")"></script>

    <script>

let interval;

            $(function () {
                let date = new Date(parseInt("@row.time"))
                let time = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
                $("#time").text(time)


              interval = setInterval(updateResult(), 10000);
            })


        function updateResult(){
                  $.post("@routes.ToolsController.getGrnaInfoByFile(row.file)", (state) => {
                    if (state === 1) {
                        $.post("@routes.ToolsController.getItcResult(row.file)"  , (data) => {

                            const $result = $("#result")

                            const html = `                    <div class="col-sm-12 result-table">
                        <table class="table table-hover table-bordered table-striped" id="fileTable" style="width: 60%;
                            margin-left: 50px">
                            <thead>
                                <tr>
                                    <th data-field="filename">Filename</th>
                                    <th data-field="explain">Description</th>
                                    <th data-field="download">Download</th>
                                </tr>
                            </thead>
                        </table>
                    </div><ul class="nav nav-tabs  px-4" role="tablist" style="border: none;border-bottom: 1px solid #ddd">
                            <li class="nav-item">
                                <a class="nav-link active" id="redraw1-tab" data-toggle="tab" href="#redraw1" role="tab" aria-controls="redraw1" aria-selected="true">
                                    Weight network diagram</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="redraw2-tab" data-toggle="tab" href="#redraw2" role="tab" aria-controls="redraw2" aria-selected="false">
                                    Heatmap</a>
                            </li>
                         </ul>
                         <div class="tab-content" style="box-sizing: border-box !important;padding-top: 30px">
                            <div class="tab-pane fade active  show" id="redraw1">
                                <div class="redraw-head" style="margin-top: 10px;display: flex;align-items: baseline;margin-left:20px">

                                    <div class="dropdown" style="display: inline-block">
                                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"
                                            style="padding: 7px 30px;text-shadow: unset;border-radius: 7px;line-height: 1.4;margin-left: 20px">
                                            Download the result chart
                                        </button>
                                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute;
                                            transform: translate3d(0px, 35px, 0px);top: 0px;left: 0px;will-change: transform;width: 150px">
                                            <a class="dropdown-item" onclick="down('jpg')">Download jpg</a>
                                            <a class="dropdown-item" onclick="down('png')">Download png</a>
                                            <a class="dropdown-item" onclick="downJson()">Download json</a>
                                        </div>
                                    </div>
                                    <div class="dropdown" style="display: inline-block;margin-left: 40px">
                                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"
                                            style="padding: 7px 30px;text-shadow: unset;border-radius: 7px;line-height: 1.4">
                                                Download detailed information about the current node and edge
                                        </button>
                                    <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute;
                                        transform: translate3d(0px, 35px, 0px);top: 0px;left: 0px;will-change: transform;">
                                        <a class="dropdown-item" style="width: auto;" href="/alfalfa/tools/downloadToolsFile?path=@{row.file}/Network_Edges.xls">Edge information (including corresponding r, p, -ln(p) and other data)</a>
                                        <a class="dropdown-item" style="width: auto;" href="/alfalfa/tools/downloadToolsFile?path=@{row.file}/Network_Nodes.xls">Node information file (including point centrality, tightness intermediateness, etc.)</a>
                                    </div>
                                </div>
                            </div>
                            <div style="display: flex">
                                <div class="col-sm-12" style="min-width: 600px;margin-top: 15px">
                                    <span style="color: gray;font-size: 13px">Tip: Click the connection or node to view the corresponding p value and c value</span>
                                    <div id="cy" style="width: 100%;height: 600px;border: 1px solid #8b8b8b9c;margin: 10px 0px 10px 0px;"></div>
                            </div>

                         </div>
                     </div>
                     <div id="redraw2" class="col-md-12 tab-pane fade">
                         <div class="redraw-head" style="margin-top: 10px;margin-left:20px">

                         <div style="display: flex">
                            <div class="col-sm-12" style="min-width: 600px;margin-top: 35px">
                                <img id="resultImg" width="100%"/>
                            </div>
 </div>

    </div>
</div>`


                            $("#result").empty().html(html)


                            $("#resultImg").attr("src", `/alfalfa/tools/getToolsImage?path=@{row.file}/heatmap.png`)

                            const net = data.net;


                            cy = window.cy = cytoscape({
                                container: document.getElementById('cy'),
                                layout: {
                                    name: 'cose',
                                    idealEdgeLength: 100,
                                    nodeOverlap: 20,
                                    refresh: 20,
                                    fit: true,
                                    padding: 30,
                                    randomize: false,
                                    componentSpacing: 100,
                                    nodeRepulsion: 400000,
                                    edgeElasticity: 100,
                                    nestingFactor: 5,
                                    gravity: 80,
                                    numIter: 1000,
                                    initialTemp: 200,
                                    coolingFactor: 0.95,
                                    minTemp: 1.0
                                },
                                style: data.selector,
                                elements: data.rows,
                                minZoom: 1e-1,
                                maxZoom: 5,
                                wheelSensitivity: 0.05
                            });
                            cy.unbind('click');
                            cy.bind('click', function (e) {
                                if (e.target === cy) {
                                    cy.edges().removeClass('highlighted');
                                } else if (e.target.group() == "nodes") {
                                    if (cy.edges("[target='" + e.target.id() + "']").hasClass('highlighted') || cy.edges("[source='" + e.target.id() + "']").hasClass('highlighted')) {
                                        cy.edges().removeClass('highlighted');
                                    } else {
                                        cy.edges().removeClass('highlighted');
                                        cy.edges("[target='" + e.target.id() + "']").addClass('highlighted');
                                        cy.edges("[source='" + e.target.id() + "']").addClass('highlighted');
                                    }
                                } else {
                                    if (cy.edges("[id='" + e.target.id() + "']").hasClass('highlighted'))
                                        cy.edges("[id='" + e.target.id() + "']").removeClass('highlighted');
                                    else cy.edges("[id='" + e.target.id() + "']").addClass('highlighted');
                                }
                            });
                            getTitleAndFile(data.title, data.tableData )
                            clearInterval(interval)
                        })
                    }else if(state === 2){
                        $("#state").html(`<div style="color:red">Failure</div>`)
                    }
                })
                return updateResult
                }

function getTitleAndFile(title, data ) {
    let tableData = [];
    $.each(data, (i, v) => {
        tableData.push({
            "filename": v[0],
            "explain": v[1],
            "download": `<a class="result-download" href="/alfalfa/tools/downloadToolsFile?path=@{row.file}/${v[0]}" ><i class="fa fa-download"></i></a>`
        })
    })

    $("#fileTable").bootstrapTable({data: tableData})
    $("#task_title").text(title);

    const $result = $("#result")
    $result.show()
    let target_top = $result.offset().top - 50;
    $("html,body").animate({scrollTop: target_top}, 800);
}

function down(param) {
    var pic = "";
    if (param == "jpg") pic = cy.jpg();
    else pic = cy.png({"bg": "#fff"});
    var a = document.createElement('a');          // 创建一个a节点插入的document
    var event = new MouseEvent('click');          // 模拟鼠标click点击事件
    a.download = 'netPic';                 // 设置a节点的download属性值
    a.href = pic;                                 // 将图片的src赋值给a节点的href
    a.dispatchEvent(event);
}

function downJson() {
    var ele = document.createElement('a');
    ele.download = "test.json";
    var blob = new Blob([JSON.stringify(cy.json(), null, 2)], {type: 'application/json,charset=utf-8;'});
    var blob = new Blob([JSON.stringify(cy.json())]);
    ele.href = URL.createObjectURL(blob);
    document.body.appendChild(ele);
    ele.click();
    document.body.removeChild(ele);
    console.log(JSON.stringify(cy.json()));
}

    </script>
}